<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>swiper轮播</title>
		<link rel="stylesheet" href="../css/swiper-4.2.0.min.css">
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			ul{
				width:800px;
				height:200px;
				margin:100px auto;
				border:1px solid red;
			}
			ul li{
				position:relative;
				float:left;
				width:200px;
				height:200px;
				background:yellow;
			}
			ul li:after{
				position:absolute;
				top:0;
				right:0;
				width:1px;
				height:200px;
				background:red;
				content:"";
			}
			ul li:nth-child(4):after{
				width:0;
			}
			ul li:nth-child(1){
				background:url("../images/banner-1.png") center/cover;
			}
			ul li:nth-child(2){
				background:url("../images/banner-2.jpg") center/cover;
			}
			ul li:nth-child(3){
				background:url("../images/banner-3.jpg") center/cover;
			}
			ul li:nth-child(4){
				background:url("../images/banner-4.jpg") center/cover;
			}
		</style>
	</head>
	<body>
		
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script src="../js/swiper-4.2.0.min.js""></script>
		<script type="text/javascript">
			/*初始化*/
			

		</script>	
		
		
	</body>
</html>
